<template>
    <BaseComponent :label="label" :required="required" :help="help">
        <div class="canvas-editor">
            <div class="canvas-container">
                <canvas ref="canvas" />
            </div>
            <div class="tools">
                <el-button-group>
                    <el-button 
                        v-for="tool in tools" 
                        :key="tool.name"
                        :type="currentTool === tool.name ? 'primary' : ''"
                        @click="selectTool(tool.name)"
                    >
                        <el-icon>
                            <component :is="tool.icon" />
                        </el-icon>
                    </el-button>
                </el-button-group>
            </div>
        </div>
    </BaseComponent>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import BaseComponent from './BaseComponent.vue';
import { Brush, Eraser, Delete } from '@element-plus/icons-vue';

const props = defineProps<{
    label?: string;
    required?: boolean;
    help?: string;
    width?: number;
    height?: number;
}>();

const emit = defineEmits<{
    (e: 'update:image', value: string): void;
    (e: 'update:mask', value: string): void;
}>();

const canvas = ref<HTMLCanvasElement>();
const currentTool = ref('brush');

const tools = [
    { name: 'brush', icon: Brush },
    { name: 'eraser', icon: Eraser },
    { name: 'clear', icon: Delete }
];

// ... 画布相关逻辑实现
</script>

<style lang="scss" scoped>
.canvas-editor {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;

    .canvas-container {
        width: 100%;
        height: 400px;
        background: #f5f7fa;
        margin-bottom: 10px;
        
        canvas {
            width: 100%;
            height: 100%;
        }
    }

    .tools {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
}
</style> 